<template>
    <!-- 用户反馈 -->
    <div id="response-parent">
        <div class="response-container">
            <!--<span id="Rsp-closer">&#xe84b;</span>-->
            <div class="response-side">
                <ul class="response-navi">
                    <li id="R-naviNew" v-bind:class="{response_checked: newspon}" @click="newspon = true">问题反馈</li>
                    <li id="R-naviOld" v-bind:class="{response_checked: !newspon}" @click="getUserInfoList($event), newspon = false">历史反馈</li>
                </ul>
            </div>
            <!-- 填写新反馈 -->
            <div class="response-main" id="R-newRsp" v-if="newspon">
                <div class="form-container">
                    <div id="just-contain">
                        <userform @changesome="formChange"></userform>
                    </div>
                </div>
            </div>

            <div class="response-main uploaded">
                <h2>提交成功，感谢您的意见和建议！</h2>
            </div>

            <!-- 历史反馈 -->
            <div class="response-main" id="R-oldRsp" v-if="!newspon">
                <div class="form-container">
                    <h2>我的历史反馈 </h2>
                    <table id="rp-table">
                        <thead>
                        <tr>
                            <th>提交时间</th>
                            <th>内容</th>
                            <th>当前状态</th>
                        </tr>
                        </thead>
                        <tbody id="rp-tableBody" v-if=" true ">
                        <template v-for="(item, index) in infoList">
                            <tr >
                                <td>{{ item.submit_time }}</td>
                                <td>{{ item.title }}</td>
                                <td>{{ item.status }}</td>
                                <td><p @click="getInfoDetail($event, index)" class="Rsp-btn">查看详情&nbsp;<span v-show="index != currentActive">&#xe88e;</span><span v-show="index == currentActive">&#xe61f;</span></p></td>
                            </tr>
                            <tr v-if="item.meta && Object.keys(item.meta).length" v-show="index == currentActive" class="newtr">
                                <td colspan="4">
                                <div class="detailContainer" id="oldDetail">
                                    <div class="rsp-detail-pices" v-for="(el,ii) in item.meta">
                                        <h6>我的描述：</h6>
                                        <p class="rsp-date">时间：{{ el.userUpdateDateFormat}}</p>
                                        <p> {{ el.userText}} </p>
                                        <ul class="imgList">
                                            <li v-for="(img,imgindex) in el.userImgsList" @click="showBigImage(img)"> 图片{{ imgindex + 1 }} </li>
                                        </ul>
                                        <template v-if="item.code !== '0'">
                                            <h6>空港小助手：</h6>
                                            <p>{{el.adminText}}</p>
                                        </template>
                                    </div>
                                    <div v-if="item.code == 1 && !addForm.show" class="askArea">
                                        <h6 >
                                            是否已解决该问题？
                                        </h6>
                                        <button class="btn-blue" @click="changeStates(2)">已解决</button>
                                        <button class="btn-gray" @click="addForm.show = true">继续提问</button>
                                    </div>
                                    <userform v-if="addForm.show" @changesome="formChange" @subAdd="changeStates" :fatherStates="addForm"></userform>
                                </div>
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="rsp-bigimg" v-show="aboutImg.show" @click="hideBigImage">
                <img :src="aboutImg.data || ''" alt="">
            </div>

        </div>
    </div>
</template>

<script>
    import userform from '../components/userRespones/userfrom.vue'
    export default{
        data () {
            return {
                newspon: true,  //上传成功标志
                getInfoListMsg: '', //历史反馈请求描述
                infoList: [],   //所有反馈信息
                currentActive: -1,   //标记当前选择反馈
                addForm: {
                    show: false,
                    id: 0
                },
                aboutImg:{
                    show: false,
                    data: ''
                }

            }
        },
        methods: {
            getUserInfoList: function(e){   //请求所有历史反馈头
                let _this= this;
                _this.currentActive = -1;
                //提取历史反馈
                $.ajax({
                    url: '/userCommit/findUserCommitList',
                    type: 'get',
                    dataType: 'json'
                })
                .done(function(res) {
                    if(res.success){
                        _this.infoList=[];
                        res.data.forEach(function (el,i) {
                            _this.infoList.unshift({
                                submit_time: el.textDateFormat,
                                title: el.title,
                                status: el.state,
                                code: el.stateCode,
                                msgID: el.userCommitInfoId,
                                meta: []
                            })
                        })
                        //_this.infoList.title= res.data;
                    }
                })
                .always(function() {
                })
            },
            getInfoDetail: function (e,i) {     //反馈详情
                let _this= this;
                _this.addForm.show = false;
                _this.currentActive= _this.currentActive==i ? -1 : i ;
                _this.addForm.id = _this.infoList[i].msgID;
                if(_this.infoList[i].meta.length > 0) return;
                //根据msgID请求详情
                $.ajax({
                    url: '/userCommit/findUserCommitDetail',
                    type: 'get',
                    dataType: 'JSON',
                    async: false,
                    data: {
                        userCommitInfoId : _this.infoList[i].msgID
                    }
                })
                .done(function(res) {
                    if(res.success || res.success=='true'){
                        _this.infoList[i].meta= res.data;
                    }
                })
            },
            changeStates: function (status) {   //change msg status
                let _this = this;
                let curid = _this.infoList[this.currentActive].msgID;
                $.ajax({
                    url: '/userCommit/updateState',
                    type: 'get',
                    dataType: 'JSON',
                    async: false,
                    data: {
                        id : curid,
                        state: status
                    }
                })
                    .done(function(res) {
                        if(res.success || res.success=='true'){
                            _this.addForm.show = false;
                            _this.refresh();
                        }
                    })
                    .error(function (err) {
                        console.log(err);
                    })
            },
            formChange(status){
                if(status.flag){   //提交成功
                    this.refreshForm();
                }else{   //关闭组件
                    this.addForm.show = false;
                }
            },
            formHasAdd(id){
                this.changeStates(0);
            },
            refresh(){
                $('#R-naviOld').click();
                this.currentActive = -1;
            },
            showBigImage(val){
                this.aboutImg = {
                    show: true,
                    data: 'data:image/jpg;base64,'+ val.blobImg
                }
            },
            hideBigImage(){
                this.aboutImg = {
                    show :false,
                    data: null
                }
            }
        },
        mounted: function(){
            this.currentActive = -1;
        },
        components: { userform }
    }
</script>

<style>

    input:focus{outline:none;}
    input:required:invalid{box-shadow: none;}
    /*滚动条*/
    ::-webkit-scrollbar-thumb{
        background-color:rgb(121, 178, 223);
        height:50px;
        outline-offset:-2px;
        outline:2px solid #fff;
        -webkit-border-radius:4px;
    }
    /*---鼠标点击滚动条显示样式--*/
    ::-webkit-scrollbar-thumb:hover{

    }

    /*---滚动条大小--*/
    ::-webkit-scrollbar{
        width:8px;
        height:8px;
    }

    /*---滚动框背景样式--*/
    ::-webkit-scrollbar-track-piece{
        background-color:rgba(153, 153, 153, 0.1);
        -webkit-border-radius:0;
    }
    /*用户反馈*/
    #response-parent *{
        font-weight: normal;
    }
    #response-parent{
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        z-index: 70;
    }
    .response-container{
        color:#fff;
        width: 950px;
        height: 600px;
        top: 130px;
        left: 25%;
        background-color: rgb(24,41,71);
        position: fixed;
    }
    .response-container #Rsp-closer{
        cursor: pointer;
        display: inline-block;
        font-size: 20px;
        font-family: icon;
        position: absolute;
        right: -30px;
        top: -30px;
        color: rgb(215,83,51);
    }
    .response-container h2{
        font-size: 14px;
        font-weight: 500;
    }
    .QuiredIcon{
        color: rgb(215,83,51);
        font-size: 14px;
        font-family: icon;
    }
    .response-side{
        float: left;
        left: 0px;
        height: 100%;
        width: 220px;
        background-color: rgb(33,67,113);
    }
    .response-main{
        float: right;
        right: 0px;
        height: 100%;
        width: 730px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    .response_checked{
        background-color: rgb(25,54,90);
        border-left: 2px solid rgb(128,188,232);
    }
    .response-navi{
        font-size: 14px;
    }
    .response-navi li{
        cursor: pointer;
        padding-left: 10px;
        height: 30px;
        line-height: 30px;
    }
    .response-navi li:hover{
        background-color: rgb(22,41,71);
    }
    .form-container{
        margin: 30px 40px;
        position: relative;
    }
    .rp-comTip{
        position: absolute;
        top: 30%;
        left: 50%;
    }
    .rp-comTip h3{
        text-align: center;
        font-weight: normal;
    }
    .rp-comTip p{
        margin-top: 40px;
        width: 260px;
    }

    /*------------------- 历史反馈*/
    #R-oldRsp table{
        margin-top: 30px;
        width: 100%;
        font-size: 12px;
        table-layout: fixed;
    }
    #R-oldRsp th{
        text-align: center;
        height: 30px;
        color: #6c7b98;
        font-weight: normal;
    }
    #R-oldRsp tr{
        height: auto;
        margin: 5px 0;
    }
    #R-oldRsp td{
        text-align: center;
        height: 30px;
    }

    #R-oldRsp .Rsp-btn{
        display: inline-block;
        cursor: pointer;
        width: 90px;
        height: 30px;
        line-height: 30px;
        border-radius: 6px;
        background-color: #214172;
    }
    #R-oldRsp .Rsp-btn span{
        font-size: 10px !important;
        font-family: icon;
    }



    /*详情模块*/
    #rp-table .detailContainer{
        position: relative;
        text-align: left;
        left: -40px;
        width: 650px;
        margin: 10px 0;
        padding: 20px 40px;
        background-color: rgb(17,33,58);
    }
    #rp-table .detailContainer h6{
        margin-top: 30px;
    }
    #rp-table .detailContainer p{
        word-break: break-all;
        line-height: 20px;
        margin: 10px 0;
    }
    #rp-table .detailContainer .rsp-detail-pices{
        margin-bottom: 20px;
        border-bottom: 1px dashed #6c7b98;
    }
    #rp-table .detailContainer .rsp-date{
        color: #6c7b98;
        font-size: 10px;
    }
    #rp-table .detailContainer ul.imgList{
        margin: 15px 0;
    }
    #rp-table .detailContainer .imgList li{
        display: inline-block;
        margin-right: 40px;
        height: 30px;
        line-height: 30px;
        color: #6c7b98;
        text-decoration: underline;
        cursor: pointer;
    }
    #rp-table .detailContainer .askArea{
        text-align: center;
        width: 200px;
        margin: 20px 0 0 auto;
    }
    .btn-blue{
        color:#FFF;
        width:80px;
        height:28px;
        line-height:28px;
        border:none;
        border-radius:5px;
        background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#62c4d7), to(#4c5cb5));
        -moz-box-shadow:1px 1px 1px #000;               /* For Firefox3.6+ */
        -webkit-box-shadow:1px 1px 1px #000;            /* For Chrome5+, Safari5+ */
        box-shadow:1px 1px 1px #000;
    }
    .btn-blue:hover{
        background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#4c5cb5), to(#62c4d7));
        box-shadow:none;
    }
    .btn-gray{
        margin-left:14px;
        color:#ccc;
        width:80px;
        height:30px;
        line-height:30px;
        background-color:#13233d;
        border:1px solid #000;
        border-radius:5px;
        -moz-box-shadow:1px 1px 1px #000 inset;               /* For Firefox3.6+ */
        -webkit-box-shadow:1px 1px 1px #000 inset;            /* For Chrome5+, Safari5+ */
        box-shadow:1px 1px 1px #000 inset;                    /* For Latest Opera */
    }
    .btn-gray:hover{
        color:#fff;
        box-shadow:none;
        border:1px solid #305a9e;
    }
    #rp-table .detailContainer .rsp-bigimg{
        position: fixed;
        max-width: 1000px;
        max-height: 600px;
        left: 20%;
        top: 10%;
        z-index: 15;
    }
    #rp-table .detailContainer .rsp-bigimg img{
        display: inline-block;
    }

    .uploaded {
        display: none;
        justify-content: center;
        align-items: center;
        position: absolute;
        height: 100%;
        top: 0;
        background-color: inherit;
        z-index: 99;
    }
    .rsp-bigimg{
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(235,235,235,0.1);
        z-index: 9999;
    }
    .rsp-bigimg img{
        max-width: 1600px;
        max-height: 900px;
        cursor: zoom-out;
        display: inline-block;
    }

</style>
